<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--  css -->
 <link type = "text/css" href = "/jQuery_class_stu/jquery-ui.min.css" rel="stylesheet">
  <!-- script 파일 -->
 <script type="text/javascript" src="/jQuery_class_stu/jquery.js"></script>
 <script type="text/javascript" src="/jQuery_class_stu/jquery-ui.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
	/*
	Dialog 처리
	1. 대화상자로 띄울 블럭을 body내 지정(div) 이용
	- 페이지 로딩시 안보이도록 처리
	- 대화상자에 title을 설정 - <div title-"타이틀">
	
	2. dialog 띄우기
	- $("dialog로 띄울 요소").dialog([설정]);
	*/
	$("#basicDialogBtn").on("click",function(){
		$("#basicDialog").dialog({
			maxWidth:400,maxHeight:500,
			modal:true
		});
	});
	
	$("#buttonDialogBtn").on("click",function(){
		//dialog({buttons:{버튼라벨:함수 , 버튼라벨: 함수, ....}})
		$("#basicDialog").dialog({
			buttons:{"닫기":function(){
				//this : dialog로 뜬 블럭 (div)
				$(this).dialog("close");//close()		
			}}
		});
	$("#positionBtn").on("click",function(){
		$("#basicDialog").dialog({
			position:
		});
	});
	
	});
 });
 </script>
</head>
<body>
<input type="text"><p>
<button id="basicDialogBtn">Dialog띄우기 - basic</button><br>
<button id="buttonDialogBtn">버튼있는 Dialog 띄우기</button><br>
<button id="positionBtn">Dialog 위치지정</button>

<div id="basicDialog" class="dialog" title="공지사항" style="display:none">
		이것은 Dialog 입니다.<br>
		안녕하세요..
</div>
</body>
</html>














